<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>MINI-TextField</title>  
         <script src="https://asmstatic.jsonmedia.com/js/boot.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../dialogs/internal.js"></script>   
        <script type="text/javascript" src="../js/control.js"></script>
        <script type="text/javascript" src="../js/base64.js"></script>
        <link href="../css/commonTable.css" rel="stylesheet" type="text/css">   
</head> 
  <style type="text/css">
        .New_Button, .Edit_Button, .Delete_Button, .Update_Button, .Cancel_Button
        {
            font-size:11px;color:#1B3F91;font-family:Verdana;  
            margin-right:5px;
        }
        
        .actionIcons span
        {
            width:16px;
            height:16px;
            display:inline-block;
            background-position:50% 50%;
            cursor:pointer;
        }
                
    </style> 
<body>  
    <form id="miniForm">
     <div id=nr_add></div>
    <a class="mini-button" iconCls="icon-add" onclick="newRow">新增</a>
   <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"idField="id" showFooter="false" showPager="false" 
   allowSortColumn="false"  allowCellEdit="true" allowCellSelect="true" multiSelect="true" 
        editNextOnEnterKey="true"  editNextRowCell="true" >
        <div property="columns">
            <div type="checkcolumn"></div>
            <div cellCls="actionIcons" name="action" width="30" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
             <div  name="subDbColumnseq" field="subDbColumnseq" width="30" headerAlign="center" allowSort="true">顺序
                <input property="editor" class="mini-spinner" style="width:100%;"/>
            </div>
            <div  name="subDbColumnName" field="subDbColumnName" width="100" headerAlign="center" allowSort="true">数据库字段
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>
            <div name="subDbColumnComment"  field="subDbColumnComment" width="100" headerAlign="center" allowSort="true">显示名称
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>                 
            <div name="subDbColumnType" field="subDbColumnType" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center"  >类型
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" onvaluechanged="onGenderChanged"/>                
            </div>            
            <div name="subDbColumnLength" field="subDbColumnLength" width="30" allowSort="true">长度
                <input property="editor" class="mini-spinner" minValue="1" maxValue="200" value="25" style="width:100%;"/>
            </div>
            <div name="linkurl" field="linkurl" width="100" allowSort="true">自定义链接地址
                  <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>                                                      
        </div>
    </div>   
   
    </form>  
    <script type="text/javascript">
    var form=""; 
    var grid ="";
    /////////////////////////
    var Genders = [{ id: 1, text: '文本框' },{ id: 2, text: '日期选择器'},{ id: 3, text: '数字选择器'},{ id: 4, text: '隐藏字段'},{ id: 5, text: 'js回调函数'}];
    function onGenderRenderer(e) {
        for (var i = 0, l = Genders.length; i < l; i++) {
            var g = Genders[i];
            if (g.id == e.value) return g.text;
        }
        return "";
    }
    /**编辑的控件的值*/
    var oNode   = null,  
    thePlugins  = '';
    var allData ='';
    var att_array = [];
	var event_array = [];
	var database_array = [];
    var controlId ="";
    var htmlName ="";
    var projectName ="";
    $(document).ready(function(){
    	controlId  = getQueryString("controlId");
    	projectName = getQueryString("projectName");
    	htmlName = getQueryString("htmlName");
    	thePlugins = htmlName;
    	queryAllControlWidgetEntity(projectName,controlId,setAllAttr);
    });
     
    // 设置从数据库中查询属性等数据
    function setAllAttr(data){
    	var json = mini.decode(data);
    	for(var i =0 ;i<json.length;i++){
    		if(json[i].attrTypeId=="1"){ //属性
    			att_array.push(json[i]);
    		}else if(json[i].attrTypeId=="3"){// 数据库属性
    			database_array.push(json[i])
    		}else{	// 事件
    			event_array.push(json[i]);
    		}
    	}
    	initTable(database_array,"控件数据库配置");
    	initTable(att_array,"控件属性");
    	initTable(event_array,"控件事件");
    	 //若控件已经存在，则设置回调其值  
        if( UE.plugins[thePlugins].editdom ){  
            oNode = UE.plugins[thePlugins].editdom;  
            parseMiniUI();  
         	form = new mini.Form('miniForm')
            callbackValue(oNode); 
         }else{
        	 parseMiniUI();
        	
         }
       
    }
    function parseMiniUI(){
    	mini.parse();
     	form = new mini.Form('miniForm');
     	 grid = mini.get("datagrid1");
     	  grid.on("cellbeginedit", function (e) {
              if (e.field == "linkurl") {
                  var row = e.record;
                  var editor = e.editor;
                  var enabled = row.subDbColumnType == "5" ? true : false;
             	  editor.setEnabled(enabled);
              }
          });
    }
    function createElement(type, name){       
            var element = null;       
            try {          
                element = document.createElement('<'+type+' id="'+name+'">');       
            } catch (e) {}     
            if(element==null) {       
                element = document.createElement(type);       
                element.name = name;       
            }   
            return element;       
        }  
         //取消按钮  
        dialog.oncancel = function () {  
            if( UE.plugins[thePlugins].editdom ) {  
                delete UE.plugins[thePlugins].editdom;  
            }  
        };  
        //确认  
        dialog.onok = function (){  
            form.validate();  
            if (form.isValid() == false) {  
                return false;  
            }  
            //控件尚未存在，则创建新的控件，否则进行更新  
            if( !oNode ) {  
                try {  
                    oNode = initoNode(att_array,event_array,database_array);
                    //需要设置该属性，否则没有办法其编辑及删除的弹出菜单  
                    oNode.setAttribute('plugins',thePlugins);  
                 // 设置子表属性
                	setSubTableAttr(oNode);
                    editor.execCommand('insertHtml',oNode.outerHTML);
                } catch (e) {  
                    try {  
                        editor.execCommand('error'); 
                        mini.alert('控件异常，请联系技术支持'); 
                    } catch ( e ) {  
                        mini.alert('控件异常，请联系技术支持');  
                    }  
                    return false;  
                }  
            } else {//已经存在，则更新属性则可  
            	oNode = update(oNode,att_array,event_array,database_array);
            	oNode.setAttribute('plugins',thePlugins); 
            	// 设置子表属性
            	setSubTableAttr(oNode);
                delete UE.plugins[thePlugins].editdom;  
            }  
        };  
          function callbackValue(oNode){
        	  update_back(oNode,att_array,event_array,database_array);
        	  oNode.setAttribute('plugins',thePlugins); 
           }
        function initTable(tds_array,titleName){
          var regAttrValue =new RegExp("@@attrValue@@","g");
          var regAttrKey =new RegExp("@@attrKey@@","g");
   		  var att_temp_start = '<fieldset style="border: solid 1px #aaa; padding: 8px;"><legend>'+titleName+'</legend><table class="table-detail commonTable"  border="1" width="100%" bordercolor="#e5e5e5">'; 
   		  var temp_end ="</table></fieldset>";
   		  var mod_1_temp = '<tr><td>@@attrValue@@</td><td><input id="@@attrKey@@" class="mini-textbox" ></td>';
   		  var mod_11_temp = '<tr><td>@@attrValue@@</td><td><input id="@@attrKey@@" class="mini-textbox" enabled="false" value="1"></td>';
   		  var mod_2_temp ='<td>@@attrValue@@</td><td><input id="@@attrKey@@" class="mini-textbox" ></td></tr>';
   		  var mod_22_temp ='<td>@@attrValue@@</td><td><input id="@@attrKey@@" class="mini-textbox" enabled="false" value="1"></td></tr>';
   		  var mod_2_end ='<td></td><td></td></tr>';
   		  var out="";
   		  var tds_array_mod = (tds_array.length%2==0);
   		  for(var i=1;i<tds_array.length+1;i++){
   			 if(i==1){
   				out = out+att_temp_start;
   			 }
   			 if(i%2==0){
   				 if(tds_array[i-1].attrKey=="isList"){
   					out= out+mod_22_temp.replace(regAttrValue,tds_array[i-1].attrValue+":").replace(regAttrKey,tds_array[i-1].attrKey); 
   				 }else{
   					out= out+mod_2_temp.replace(regAttrValue,tds_array[i-1].attrValue+":").replace(regAttrKey,tds_array[i-1].attrKey);  
   				 }
   				
   			 }else{
   				 if(tds_array[i-1].attrKey=="isList"){
   					out= out+mod_11_temp.replace(regAttrValue,tds_array[i-1].attrValue+":").replace(regAttrKey,tds_array[i-1].attrKey);
   				 }else{
   					out= out+mod_1_temp.replace(regAttrValue,tds_array[i-1].attrValue+":").replace(regAttrKey,tds_array[i-1].attrKey);
   				 }
   				
   			 }
   			if((!tds_array_mod) && i==tds_array.length){
   				out= out+mod_2_end;
   			}
   		  }
   		   out= out+temp_end;
   		$("#nr_add").append(out);
        }  
        function initoNode(att_array,event_array,database_array){
        	var oNode
             for(var i=0;i<att_array.length;i++){
            	 if(att_array[i].attrKey=='id'){
            		 oNode = createElement('input',att_array[i].attrKey); 
            		 oNode.setAttribute('value',"===子表控件===");
            		 oNode.setAttribute('readonly',"readonly");
                     oNode.setAttribute('class',htmlName);
            	 }
            	 if(mini.get(att_array[i].attrKey).getValue()!=""){
            	 	 oNode.setAttribute(att_array[i].attrKey,mini.get(att_array[i].attrKey).getValue()); 
            	 }else{
   	      	    	oNode.removeAttribute(att_array[i].attrKey);
   	      	    }
              }
        	for(var i=0;i<database_array.length;i++){
           	  if(mini.get(database_array[i].attrKey).getValue()!=""){
           	 	 oNode.setAttribute(database_array[i].attrKey,mini.get(database_array[i].attrKey).getValue()); 
           	 }else{
  	      	    	oNode.removeAttribute(database_array[i].attrKey);
  	      	    }
             }
             for(var i=0;i<event_array.length;i++){
            	 if(mini.get(event_array[i].attrKey).getValue()!=""){
            		 oNode.setAttribute(event_array[i].attrKey,mini.get(event_array[i].attrKey).getValue());
                 }else{
   	      	    	oNode.removeAttribute(event_array[i].attrKey);
   	      	    }
            }
              
             return getListData(oNode);
        }  
        
        function update(oNode,att_array,event_array,database_array){
        	  for(var i=0;i<att_array.length;i++){
        		  var newValue =  mini.get(att_array[i].attrKey).getValue();
        		  if(newValue!=""){
        			oNode.setAttribute(att_array[i].attrKey,mini.get(att_array[i].attrKey).getValue());
        		  }else{
  	      	    	oNode.removeAttribute(att_array[i].attrKey);
  	      	    	}
        		}
              for(var i=0;i<event_array.length;i++){
            	 if(mini.get(event_array[i].attrKey).getValue()!=""){
            		 oNode.setAttribute(event_array[i].attrKey,mini.get(event_array[i].attrKey).getValue());
                  }else{
  	      	    	oNode.removeAttribute(event_array[i].attrKey);
  	      	    }
            }
              for(var i=0;i<database_array.length;i++){
            	  var newValue =  mini.get(database_array[i].attrKey).getValue();
        		  var oldValue =  oNode.getAttribute(database_array[i].attrKey);
             	 if(newValue!=""){
             		if(database_array[i].attrKey=="columnName"){
             			if(newValue!=oldValue){
							oNode.setAttribute("oldcolumnName",oldValue);
             			}
        			 }
             		 oNode.setAttribute(database_array[i].attrKey,mini.get(database_array[i].attrKey).getValue());
                   }else{
   	      	    	oNode.removeAttribute(database_array[i].attrKey);
   	      	    }
             }
              return getListData(oNode);
        }
        function update_back(oNode,att_array,event_array,database_array){
        	setListData(oNode);
      	  for(var i=0;i<att_array.length;i++){
	      		if(oNode.getAttribute(att_array[i].attrKey)!=""){
	      			mini.get(att_array[i].attrKey).setValue(oNode.getAttribute(att_array[i].attrKey));
	      	    }else{
	      	    	oNode.removeAttribute(att_array[i].attrKey);
	      	    }
      		}
            for(var i=0;i<event_array.length;i++){
            	if(oNode.getAttribute(event_array[i].attrKey)!=""){
            	 mini.get(event_array[i].attrKey).setValue(oNode.getAttribute(event_array[i].attrKey));
            	}else  {
	      	    	oNode.removeAttribute(event_array[i].attrKey);
	      	    }
             }
            for(var i=0;i<database_array.length;i++){
            	if(oNode.getAttribute(database_array[i].attrKey)!=""){
            	 mini.get(database_array[i].attrKey).setValue(oNode.getAttribute(database_array[i].attrKey));
            	}else  {
	      	    	oNode.removeAttribute(database_array[i].attrKey);
	      	    }
             }
            return oNode;
      }
        function newRow() {  
            var row = {};
            grid.addRow(row);
            //grid.beginEditRow(row);
            grid.beginEditCell(row, "subDbColumnseq");
        }  

        function onActionRenderer(e) {
			var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;
			var s = '<span class="icon-remove" title="删除" onclick="delRow('+uid+')"></span>';
            return s;
        }
        function delRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                grid.removeRow(row);
            }
        }
        function onGenderChanged(e) {
            var combo = e.sender;
            var row = grid.getEditorOwnerRow(combo);
            var editor = grid.getCellEditor("linkurl", row);
            var enabled = combo.getValue() == "5" ? true : false;
            editor.setEnabled(enabled);
        }
        function getListData(oNodeoNode) {
            var data = grid.getEditData(true);
            if(data.length==0){
            	oNodeoNode.removeAttribute("subtableattr");
            	return oNodeoNode;
            }else{
            	var json = mini.encode(data);
            	$.ajax({
            		url : projectName+"/TableDefineAdmin/distinctRow",
            		type : 'post',
            		contentType: "application/json;charset=utf-8",
            		data: json,
            		async: false,
            		cache : false,
            		success : function(data4) {
            			var base = new Base64();  
            			//alert(mini.encode(mini.decode(data4).result.data));
                    	var result = base.encode(mini.encode(mini.decode(data4).result.data));  
                    	oNodeoNode.setAttribute("subtableattr",result);
                    	
            		}
            	});
            	return oNodeoNode;
            }

        }
        function setListData(oNodeoNode) {
        	var jsonStr = oNodeoNode.getAttribute("subtableattr");
        	var arr = new Array();
        	if(jsonStr!=""&&jsonStr!=null){
            	var base = new Base64(); 
            	// 先解base64.encode
            	var result2 = base.decode(jsonStr);    
            	// 再解mini.encode
            	var data = mini.decode(result2);
            	for(var i =0;i<data.length;i++){
            			grid.addRow(data[i],i);
            	 }
        	}	
            return oNodeoNode;
        }
       
        /** 补充子表属性*/
        function setSubTableAttr(oNode){
        	var grid = mini.get("datagrid1");
        	data = grid.getData();
        	// 先编mini.encode
        	data = mini.encode(data);
        	var base = new Base64();  
        	// 再编base64.encode
        	data = base.encode(data);
        	oNode.setAttribute("subtableattr",data);
        }
        ////////////////如果使用自定义链接, 那么链接中的方法命名规则/**函数命名:子表控件名+字段名+click**/
    </script>  
</body>  
</html>  
